<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>test</title>
	
	<style>
		/*练习1*/
		#text1{color: purple; background-color: yellow;font-style: italic}
		
		/*练习2*/
		div>p {color: red}
		div span {color: orange}
		div span b{color: blue}
		div h4 {color: purple}
		div>h4>i {color: pink}
		
		/*练习3*/
		#a1:link{color: yellow}
		#a1:visited{color: orange}
		#a1:hover{color: red; background-color: pink}
		#a1:active{color: green}
		
	</style>
	
</head>
<body>
练习1:<br>
<p id="text1">id选择器: 我是h2</p>

练习2: <br>
子代后代选择器 1red 2orange 3blue 4purple 5pink <br>
<div>
	<p>
		111111
		<span>
			2222
			<b>3333</b>
		</span>
	</p>
	
	<h4>
		44444444
		<i>5555555</i>
	</h4>
	
</div>

练习3: <br>
a#a1  (a标签 id=a1) 文本颜色 <br>
注意 link visited hover active 顺序
<ol>
	<li>访问后 orange</li>
	<li>激活时 green</li>
	<li>鼠标悬停 red</li>
	<li>未被访问 yellow</li>
</ol>

<a href="http://www.163.com" id="a1">id == a1 的标签</a> <br>
<a href="" >没有id的标签</a>




</body>
</html>